<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动模型(Float)</title>
    <style type="text/css">
        /* 设计初衷: 文字围绕图片排列效果  -  图片 浮动
       问题: 子元素浮动  导致父元素的高度塌陷  height:0;
       解决思路:如何清浮动 - 多少种
       1.height   (添加父元素)
       2.overflow:hidden (添加父元素)
       3.clear:both (空元素 + 块级特点的元素 + clear：both =》 加在浮动子元素的末尾)   -  隔墙法
       4.复用
       .clearfix::after{
           content:'';
           display:block;
           clear:both
           ...
       }
       .clearfix{
           *zoom:1;
       }
       5.以浮动制浮动 float - BFC触发的一个条件
       。。。。

     */
        img {
            float: left
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both
        }

        .clearfix {
            *zoom: 1;
        }
    </style>
</head>

<body>
    <div class="main clearfix">
        <img src="https://inews.gtimg.com/newsapp_ls/0/12673365175_640330/0" alt="">
        <div class="txt">
            <a>超模范！小酒窝穿廓形西装条纹衫时尚感强 眼神清澈又萌又帅超模范！小酒窝穿廓形西装条纹衫时尚感强 眼神清澈又萌又帅超模范！</a>
        </div>
    </div>
    <ul>
        <li>超模范！小酒窝穿廓形西装条纹衫时尚感强 </li>
        <li>超模范！小酒窝穿廓形西装条纹衫时尚感强 </li>
        <li>超模范！小酒窝穿廓形西装条纹衫时尚感强 </li>
        <li>超模范！小酒窝穿廓形西装条纹衫时尚感强 </li>
    </ul>

</body>

</html>